import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable, ActionType, ProColumns } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import { useHistory } from 'umi';
import DetailModal from './components/DetailModal';
import ReplayUser from './components/ReplayUser';
import { queryWechatComplaint } from './service';
import { ComplaintTableItem } from './types.d';

const ComplaintList = () => {
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [currItem, setCurrItem] = useState<ComplaintTableItem | null>(null);
  const [replayVisible, setReplayVisible] = useState<boolean>(false);
  const [currReplayItem, setCurrReplayItem] = useState<ComplaintTableItem | null>(null);
  const ref = useRef<ActionType>();
  const history = useHistory();
  // if (history.action == 'POP') {
  //   ref.current?.reload();
  // }

  const columns: ProColumns<ComplaintTableItem>[] = [
    {
      title: '投诉单号',
      dataIndex: 'complaintId',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '微信支付号',
      dataIndex: 'orderInfos',
      align: 'center',
      renderText: (_, record) => {
        if (!record.orderInfos || record.orderInfos.length < 1) return '暂无数据';
        return record.orderInfos[0].payOrderNo;
      },
    },
    {
      title: '投诉时间',
      dataIndex: 'complaintTime',
      align: 'center',
      valueType: 'dateTime',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '问题描述',
      dataIndex: 'problemDesc',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '问题类型',
      dataIndex: 'problemType',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
      valueEnum: {
        REFUND: { text: '申请退款', status: 'Error' },
        SERVICE_NOT_WORK: { text: '服务权益未生效', status: 'Error' },
        OTHERS: {
          text: '其他类型',
          status: 'Error',
        },
      },
    },
    {
      title: '支付金额(元)',
      dataIndex: 'orderInfos',
      align: 'center',
      valueType: 'money',
      hideInSearch: true,
      hideInForm: true,
      renderText: (_, record) => {
        if (!record.orderInfos || record.orderInfos.length < 1) return 0;
        return (Number(record.orderInfos[0].amount) / 100).toFixed(2);
      },
    },

    {
      title: '申请退款金额(元)',
      dataIndex: 'applyRefundAmount',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
      renderText: (text) => (text ? `￥${(text / 100).toFixed(2)}` : '-'),
    },
    {
      title: '投诉描述',
      dataIndex: 'detail',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '投诉人联系方式',
      dataIndex: 'phone',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '投诉次数',
      dataIndex: 'complaintTimes',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '投诉单状态',
      dataIndex: 'state',
      align: 'center',
      hideInForm: true,
      valueEnum: {
        PENDING: { text: '待处理', status: 'Error' },
        PROCESSING: { text: '处理中', status: 'Processing' },
        PROCESSED: { text: '已处理完成', status: 'Success' },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      render: (_, record) => {
        return [
          <a
            onClick={() => {
              // setCurrItem(record);
              // setDetailVisible(true);
              history.push({
                pathname: '/wechat/complaint-list/detail',
                state: record.complaintId,
              });
            }}
          >
            详情
          </a>,
          record.waitResponse && (
            <a
              onClick={() => {
                setCurrReplayItem(record);
                setReplayVisible(true);
              }}
            >
              回复
            </a>
          ),
        ];
      },
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '微信用户投诉列表',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/wechat', breadcrumbName: '微信用户' },
            { path: '/wechat/complaint-list', breadcrumbName: '投诉列表' },
          ],
        },
      }}
    >
      <ProTable<ComplaintTableItem>
        rowKey="_id"
        columns={columns}
        scroll={{ x: true }}
        search={{ labelWidth: 'auto' }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        actionRef={ref}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryWechatComplaint(param, sort);
          return res;
        }}
      />
      {detailVisible && currItem && (
        <DetailModal
          citem={currItem}
          visible={detailVisible}
          close={() => {
            setCurrItem(null);
            ref.current?.reload();
            setDetailVisible(false);
          }}
        />
      )}
      {replayVisible && currReplayItem && (
        <ReplayUser
          complaintId={currReplayItem.complaintId}
          visible={replayVisible}
          close={() => {
            setCurrReplayItem(null);
            ref.current?.reload();
            setReplayVisible(false);
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default ComplaintList;
